<template>
    <div>
    <button @click="add">新增+</button>
        <table border="1px"> 
        <thead>
            <tr>
            <td width="200px" height="50px">序号</td>
            <td width="200px" height="50px">标签名称</td>
            <td width="200px" height="50px">状态</td>
            <td width="200px" height="50px">操作</td>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list" :key="index">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>正常</td>
            <td><button @click="xg(item.id)">修改</button><button @click="del(item.id)">删除</button></td>
        </tr>
        </tbody>
        </table>
        <div id="zz" v-show="zz">
            <div id="tc" v-show="tc">
                标签名称:<input v-model="inp1" /><br><br><br>
                <button @click="qx1">取消</button><button @click="qr1">确定</button>
            </div>
            <div id="tc2" v-show="tc2">
            修改后的名称:<input v-model="inp2" /><br><br><br>
                <button @click="qx2">取消</button><button @click="qr2">确定</button>
            </div>
            <div id="tc3" v-show="tc3">
            确认要删除吗
            <button @click="qx3">取消</button><button @click="qr3">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex"
export default {
    data(){
        return{
            inp1:"",
            zz:false,
            tc:false,
            tc2:false,
            inp2:"",
            tc3:false
        }
    },
     computed:{
        ...mapState(["list"])
    },
    mounted(){
        this.getlist()
    },
    methods:{
        ...mapMutations(["setlist","setadd","setxg","setxb","setdelind","setdel"]),
        ...mapActions(["getlist"]),
        add(){
            this.zz=true
            this.tc=true
        },
        qx1(){
            this.zz=false
            this.tc=false
        },
        qr1(){
            // console.log(123);
            this.zz=false
            this.tc=false
            this.setadd(this.inp1)
            this.inp1=""
        },
        xg(item){
            this.zz=true
            this.tc2=true
            this.setxb(item)
        },
        qx2(){
            this.zz=false
            this.tc2=false
        },
        qr2(){
            this.zz=false
            this.tc2=false
            this.setxg(this.inp2)  
            this.inp2=""
        },
        del(item){
            this.zz=true
            this.tc3=true
            this.setdelind(item)
        },
        qx3(){
            this.zz=false
            this.tc3=false
        },
        qr3(){
            this.zz=false
            this.tc3=false
            this.setdel()
        }
    }
}
</script>

<style>
    #zz{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 0;
        top: 0;
    }
    #tc{
        width: 300px;
        height: 200px;
        background: floralwhite;
        margin: 30px auto;
    }
    #tc2{
        width: 300px;
        height: 200px;
        background: floralwhite;
        margin: 30px auto;
    }
    #tc3{
        width: 300px;
        height: 200px;
        background: floralwhite;
        margin: 30px auto;
    }
    #tc button{
        margin-left: 20px;
    }
</style>